<div>
  <div class="ui-g ui-fluid">
    <div class="ui-g-12 ui-md-6 ui-lg-4">
      <span>Basic</span>
      <p-inputMask mask="99-999999" [(ngModel)]="val1" placeholder="99-999999"></p-inputMask>
      <p class="input-value"><span class="label">输入值: </span>{{val1}}</p>
    </div>

    <div class="ui-g-12 ui-md-6 ui-lg-4">
      <span>SSN</span>
      <p-inputMask mask="999-99-9999" [(ngModel)]="val2" placeholder="999-99-9999"></p-inputMask>
      <p class="input-value"><span class="label">输入值: </span>{{val2}}</p>
    </div>

    <div class="ui-g-12 ui-md-6 ui-lg-4">
      <span>Date</span>
      <p-inputMask mask="99/99/9999" [(ngModel)]="val3" placeholder="99/99/9999" slotChar="mm/dd/yyyy"></p-inputMask>
      <p class="input-value"><span class="label">输入值: </span>{{val3}}</p>
    </div>

    <div class="ui-g-12 ui-md-6 ui-lg-4">
      <span>Phone</span>
      <p-inputMask mask="(9999) 999-9999" [(ngModel)]="val4" placeholder="(9999) 999-9999"></p-inputMask>
      <p class="input-value"><span class="label">输入值: </span>{{val4}}</p>
    </div>

    <div class="ui-g-12 ui-md-6 ui-lg-4">
      <span>Phone Ext</span>
      <p-inputMask mask="(999) 999-9999? x99999" [(ngModel)]="val5" placeholder="(999) 999-9999? x99999"></p-inputMask>
      <p class="input-value"><span class="label">输入值: </span>{{val5}}</p>
    </div>

    <div class="ui-g-12 ui-md-6 ui-lg-4">
      <span>Serial Number</span>
      <p-inputMask mask="a*-999-a999" [(ngModel)]="val6" placeholder="a*-999-a999"></p-inputMask>
      <p class="input-value"><span class="label">输入值: </span>{{val6}}</p>
    </div>
  </div>
</div>
